//Dependence cat.js
function Libra(){
	var _this = this;

	_this.balances = [];
	_this.ballholder = undefined;

	var Ball = (function(){
		var libra = _this;
		//constants
		var HEIGHT = 60 , WIDTH = 60;
		var constructor = function(element,weight){
			var _this = this;
			_this.id = element.getElementsByTagName('span')[0].innerHTML;
			_this.weight = weight;
			_this.el = element;
			_this.libra = libra;

			var offsetTop = _this.libra.ballholder.el.offsetTop + 10;
			var offsetLeft = _this.libra.ballholder.el.offsetLeft + (_this.id-1)*60 + 10;
			_this.offsetTop = offsetTop;
			_this.offsetLeft = offsetLeft;
			_this.el.style.top = offsetTop+"px";
			_this.el.style.left = offsetLeft+"px";
			//drag & drop process
			_this.onDragStart = function(e){
			};
			_this.onDrag = function(e){
				Cat.each(_this.libra.balances,function(balance){
					balance.include(e.pageX,e.pageY) ? balance.active() : balance.deactive();
				});
			};
			_this.onDrop = function(e){
				//check if the ball are outside both holders
				Cat.every(_this.libra.balances,function(balance){
					//add ball to balance
					balance.include(e.pageX,e.pageY) ? balance.push(_this) : 0;
					return balance.include(e.pageX,e.pageY) ? false : true;
				}) ? _this.restore() : _this.settle() ;
			};
			//settle down ball position
			_this.settle = function(){
				return false;
			};
			//restore ball original position
			_this.restore = function(){
				_this.el.style.top = _this.offsetTop+"px";
				_this.el.style.left = _this.offsetLeft+"px";
				//remove ball from balances
				Cat.each(_this.libra.balances,function(balance){
					balance.indexOf(_this) !== -1 ? delete balance[balance.indexOf(_this)] : 0;
				});
			};

			//mouse event listener
			_this.el.onmousedown = function(e){
				e.preventDefault();
				_this.onDragStart(e);
				var elX = _this.el.offsetLeft , elY = _this.el.offsetTop;//element start coordinate
				var msX = e.pageX , msY = e.pageY;//mouse start coordinate

				window.onmousemove = function(e){
					e.preventDefault();
					_this.onDrag(e);
					//get mouse coordinate
					var deltaX = e.pageX - msX , deltaY = e.pageY - msY;
					//set ball coordinate
					_this.el.style.top = elY + deltaY + "px";
					_this.el.style.left = elX + deltaX + "px";
					_this.el.style.zIndex = 1000;
				};

			};
			_this.el.onmouseup = function(e){
				e.preventDefault();
				_this.onDrop(e);
				window.onmousemove = null;
				_this.el.style.zIndex = 999;
			};
		};
		return constructor;
	})();

	function BallHolder(element){
		var _this = this;
		_this.el = element;
		_this.balls = [];
		Cat.proxy(_this.balls,_this);
	}
	function Balance(element){
		var _this = this;
		_this.el = element;
		_this.balls = [];
		Cat.proxy(_this.balls,_this);

		_this.startX = Cat.offset(_this.el).left;
		_this.endX = _this.startX + _this.el.offsetWidth;
		_this.startY = Cat.offset(_this.el).top;
		_this.endY = _this.startY + _this.el.offsetHeight;

		_this.include = function(x,y){
			 return x >= _this.startX && x <= _this.endX && y >= _this.startY && y <= _this.endY;
		};
		_this.active = function(){
			_this.el.style.borderColor = "#C4D830";
		};
		_this.deactive = function(){
			_this.el.style.borderColor = "#CCC";
		};
	}

	_this.lean = function(direction){
		var interval = 50 , cur = 100 , gap = 12.5;
		var handler = setInterval(function(){
			cur -= gap;
			//balance
			Cat.querySelectorAll('#balance')[0].style.background = Cat.format(
				"url(/img/balance.png) no-repeat 50% {0}%",cur
			);
			//holders
//			Cat.querySelectorAll('#left_platform')[0].style.top = 

			cur === 0 ? clearInterval(handler) : 0;
		},interval);
	};

	//initial
	(function(){
		_this.ballholder = new BallHolder(Cat.querySelectorAll('#ballholder')[0]);
		_this.balances.push(new Balance(Cat.querySelectorAll('#left_holder')[0]));
		_this.balances.push(new Balance(Cat.querySelectorAll('#right_holder')[0]));

		Cat.each(Cat.querySelectorAll('.ball'),function(el){
			var ball = new Ball(el,10);
			_this.ballholder.push(ball);
		});
		//add event listener
		Cat.querySelectorAll('#weight')[0].onclick = function(){
			_this.lean();
		};
	})();
}
window.onload = function(){
	var libra = new Libra();
	console.log(libra);
};
